<template>
  <div ref="echartsEle" :style="{width: '100%',height:props?.height?props?.height:130+'px'}" id='line-echarts'></div>
</template>

<script ref="" setup lang="ts">
import {ref, watchEffect} from "vue";
import * as echarts from 'echarts';

const props = defineProps(["xData", "yData", "height"]);
// 元素
const echartsEle = ref<HTMLDivElement | null>(null);
const option = {
  grid: {
    top: 0,
    bottom: "9px"
  },
  xAxis: {
    type: 'category',
    data: props?.yData ? props?.yData : ["1", "2", "3", "4", "5", "6", "7", "8"],
    axisTick: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      show: false
    },
    axisLine: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    axisTick: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      show: false
    },
    axisLine: {
      show: false
    },
    barCategoryGap: '3%',/*多个并排柱子设置柱子之间的间距*/
    barWidth: 15,
  },
  // dataZoom: {
  //     type: 'inside',
  //     show: false,
  //     // 设置组件控制的y轴
  //     yAxisIndex: [0],
  //     // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%
  //     // 也可以用 startValue设置起始值
  //     start: 100,
  //     end:10,
  //     preventDefaultMouseMove: false,
  // },
  series: [
    {
      data: props?.yData ? props?.yData : [3, 2, 3, 4, 2, 3, 3, 5],
      type: 'bar',
      barGap: '3%',/*多个并排柱子设置柱子之间的间距*/
      itemStyle: {
        normal: {
          color: '#1890ff',
        }
      },
      barWidth: '10px'
    },
  ]
};

watchEffect(() => {
  if (echartsEle.value) {
    // 初始化
    const myChar = echarts.init(echartsEle.value);
    // 加载配置
    Option && myChar.setOption(option)
  }
})
</script>